<template>
  <div class="app-container">
    <el-form :model="queryInfo"  :inline="true" size="small">
      <el-form-item label="课程名称">
        <el-input v-model="queryInfo.title"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableList"  >
      <el-table-column type="index" label="序号"/>
      <el-table-column label="课程名称" prop="title"/>
      <el-table-column  label="课程价格" prop="price"/>
      <el-table-column  label="课时" prop="lessonNum"/>
      <el-table-column  label="课程状态" prop="status">
        <template slot-scope="scope">
          {{scope.row.status == "Normal" ? "已发布" : "未发布"}}
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini">编辑课程信息</el-button>
          <el-button type="text" size="mini">编辑课程大纲</el-button>
          <el-button type="text" size="mini" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    
  </div>
</template>

<script>
import courseApi from "@/api/course"
  export default {
    data() {
      return {
        queryInfo: {
          pageNum:1,
          pageSize:5,
          title:null
        },
        tableList:[],
        total:0
      }
    },
    created () {
      this.getList();
    },
    methods: {
      handleCurrentChange(newNum) {
        this.queryInfo.pageNum = newNum;
        this.getList()
      },
      handleSizeChange(newSize) {
        this.queryInfo.pageSize = newSize;
        this.getList()
      },
      handleQuery() {
        this.queryInfo.pageNum = 1;
        this.getList()
      },
      async getList() {
        let res = await courseApi.queryCourseList(this.queryInfo)
        console.log(res);
        if(res.success) {
          this.tableList = res.data.records;
          this.total = res.data.total;
        }else{
          return this.$message.error(res.msg)
        }
      },
      handleDel(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await courseApi.deleteCourse(id);
          if(res.success) {
            this.$message.success("删除课程成功")
            this.getList()
          }else{
            return this.$message.error(res.msg)
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>